<template>
  <div class="load">
    <CardBox title="科普教育"></CardBox>
    <div class="content-container">
      <div class="box">
        <div class="timeline-container">
          <div
            class="timeline-item"
            v-for="(item, index) in timelineData"
            :key="index"
            :class="{ active: activeIndex === index }"
          >
            <img src="@/assets/img/fold-line.png" alt="" class="fold-line" />
            <div class="timeline-header" @click="toggleItem(index, item.type)">
              <div class="timeline-title">
                <img :src="item.img" alt="" class="timeline-img" />
                <span class="pl-10">{{ item.title }}</span>
              </div>
              <div class="timeline-year">
                <img
                  src="@/assets/img/fold-icon1.png"
                  v-show="activeIndex === index"
                  alt=""
                  class="fold-icon1"
                />
                <img
                  src="@/assets/img/fold-icon2.png"
                  v-show="activeIndex !== index"
                  alt=""
                  class="fold-icon2"
                />
              </div>
            </div>
            <div class="timeline-content">
              <div
                class="item"
                v-for="(subItem, index) in item.content"
                :key="index"
              >
                <div class="timeline-item-title">
                  <img
                    src="@/assets/img/create-arrow.png"
                    alt=""
                    class="create-arrow"
                  />
                  <span class="timeline-title">{{ subItem.title }}</span>
                </div>
                <div class="timeline-item-content">
                  <span class="timeline-item-content-text">{{
                    subItem.content
                  }}</span>
                </div>
                <div class="timeline-item-img">
                  <img
                    :src="subItem.img[0]"
                    alt=""
                    class="timeline-item-img-img"
                  />
                  <img
                    :src="subItem.img[1]"
                    alt=""
                    class="timeline-item-img-img"
                    v-if="subItem.img.length > 1"
                  />
                </div>
              </div>
            </div>
          </div>
          <img src="@/assets/img/fold-line.png" alt="" class="fold-line" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardBox from "@/components/Global/CardBox.vue";
export default {
  components: { CardBox },
  data() {
    return {
      timelineData: [
        {
          img: require("@/assets/img/education1.png"),
          title: "科普品牌活动",
          type: "education1",
          content: [
            {
              title: '精灵之约·暗访夜精灵"夜间自然观察活动',
              content:
                '暗访夜精灵"夜间自然观察活动是上海植物园"一馆一品"科普品牌。该活动依托园内的动植物资源和生物多样性等优势，以自然观察的方式,让参与者认识一个不同于白天的植物园,感受都市中的野趣和科学。自 2009 年首次推出，开启了国内"夜游"的先河，带动了全国夜间自然观察活动的发展。',
              img: [
                require("@/assets/img/education1-1.png"),
                require("@/assets/img/education1-2.png"),
              ],
            },
            {
              title: "青少年科学创新实践工作站",
              content:
                "工作站科普活动从科普讲座、科普讲解、互动体验、科普夏令营和科学实验探索五个方面形成系列特色课程，逐步建立起中学生对植物及相关知识和科学实验的认识，进一步在学习中掌握知识，在思考中有所突破。",
              img: [require("@/assets/img/education2-1.png")],
            },
            {
              title: '"上植”系列科普活动',
              content:
                "“上植”系列科普活动于2017年起在上海(国际)花展、秋季花展精彩呈现,围绕自然、文化、艺术、健康和休憩等各大板块,推出精品上植、艺术上植、健康上植、靓丽上植、自然上植、趣味上植、野趣上植、文化上植、印象上植、乐享上植、畅游上植、花漾上植、品味上植及微景上植等系列科普品牌活动，取得了良好的社会效益。",
              img: [
                require("@/assets/img/education3-1.png"),
                require("@/assets/img/education3-2.png"),
              ],
            },
            {
              title: "“二十四节气”系列科普活动",
              content:
                "活动通过动植物及气象物候的观察观测、科普讲座、科普活动互动、二十四节气花园构建等方式，向大众普及和传播二十四节气丰富的物质知识、节气文化以及科学的二十四节气的应对方法和理念。",
              img: [
                require("@/assets/img/education4-1.png"),
                require("@/assets/img/education4-2.png"),
              ],
            },
          ],
        },
        {
          img: require("@/assets/img/education2.png"),
          title: "公众教育",
          type: "education2",
          content: [
            {
              title: "公众教育活动",
              content:
                "主要通过面向公众开放各类展览如生物多样性保护系列科普展、主题花系列科普文化/艺术展、国际科学艺术面展、国际押花艺术展、国际插花艺术季等，普及科学知识。",
              img: [
                require("@/assets/img/public-education1.png"),
                require("@/assets/img/public-education2.png"),
                require("@/assets/img/public-education3.png"),
                require("@/assets/img/public-education4.png"),
              ],
            },
          ],
        },
        {
          img: require("@/assets/img/education3.png"),
          title: "分众教育",
          type: "education3",
          content: [
            {
              title: "环境教育",
              content:
                '上海植物园多年来坚特开展环境教育。1998年4月4日，在植物园举办了“我们的地球,我们的家”环境教育展览会。2023年5月21日，上海市国际生物多样性日主场活助在上海植物园举行。活动主题为“从协议到协力:复元生物多牌性(From Agreement to Action:6ulld Back Bfodiversity)".',
              img: [require("@/assets/img/diverse-education1.png")],
            },
            {
              title: "自然讲堂",
              content:
                '自然讲堂项目结合植物园实地考察，带领公众探寻大自然。主题活动包括“自然笔记”、“专类园导赏”、“园艺大讲堂”、“植物与健康”系列讲座、"探秘热带雨林的奇花异木”、"正在消失的山野之灵”、“植物园里的“五朵全花’"、"大白然的氧气制造者一水生生物观察”、"与自然“道”乐一果实宝宝，童趣六一”够。',
              img: [
                require("@/assets/img/diverse-education2.png"),
                require("@/assets/img/diverse-education3.png"),
                require("@/assets/img/diverse-education4.png"),
              ],
            },
            {
              title: "二期课改",
              content:
                "从2009年成为二期课改教育基地的一员以后，上海植物园以形式多样的活助内客、生动有趣的知识讲解、清新白然的活动场地、井然有序的组织流程迎接了许多中小学生，帮助他们接受植物、生态方面的相关知识。",
              img: [require("@/assets/img/diverse-education5.png")],
            },
            {
              title: "体验活动",
              content:
                "园内丰富多彩的体验活的包括元宵猜灯谜、教师节押花手作、插花艺术体验、秋日丰收采摘、植物微景观制作、桂花主题调香、端午识百草等。",
              img: [
                require("@/assets/img/diverse-education6.png"),
                require("@/assets/img/diverse-education7.png"),
              ],
            },
            {
              title: "研学项目",
              content:
                '1980年，上海植物园、上海少年科学技术指导建立本市第一个青少年植物兴趣小组——“上海青少年植物兴趣小组”。2017-2018年夏季，开展"精灵之约”神农架案子科考及“北纬30度”亲自科考成长营。2023年起，开展“小小公民科学家”最列增调计划。',
              img: [
                require("@/assets/img/diverse-education8.png"),
                require("@/assets/img/diverse-education9.png"),
              ],
            },
          ],
        },
        {
          img: require("@/assets/img/education4.png"),
          title: "种子计划",
          type: "education4",
          content: [],
        },
      ],
      activeIndex: 0,
      activeType: "education1",
      activeItemIndex: 0,
    };
  },
  mounted() {

  },
  methods: {
    toggleItem(number, string) {
      this.activeIndex = number;
      this.activeType = string;
      this.activeItemIndex = 0;
    }

  },
};
</script>
<style lang="scss" scoped>
.timeline-container {
  height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  .fold-line {
    width: calc(100% - 40px);
    height: 4px;
    padding: 0 20px;
    display: block;
  }
  .timeline-item {
    flex: 1;
    transition: all 0.3s ease;
    overflow: hidden;
    max-height: 36px;

    &.active {
      flex: 3;
      min-height: 800px;
    }

    .fold-icon1 {
      width: 13px;
      height: 6px;
      position: relative;
      top: -4px;
      left: -2px;
    }

    .fold-icon2 {
      width: 13px;
      height: 14px;
      position: relative;
      top: 0px;
      left: -2px;
    }

    .timeline-header {
      height: 30px;
      line-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background-size: 100% 100%;
      cursor: pointer;

      .timeline-title {
        color: #07ffe5;
        font-size: 16px;
      }
    }

    .timeline-content {
      padding: 20px 20px 20px 40px;
      max-height:750px;
      overflow-y: auto;
      .item {
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(7, 255, 229, 0.4);
        margin-bottom: 14px;
        .timeline-item-title {
          color: #07ffe5;
          font-size: 14px;
          .create-arrow {
            margin-right: 10px;
          }
        }
        .timeline-item-content {
          color: #D1D1D1;
          font-size: 12px;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .timeline-item-img {
          img {
            width: calc(50% - 5px);
            height: 108px;
            &:last-child {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>

